<template>
  <div id="caseDetails">
    <van-nav-bar title="新增健康档案" left-arrow left-text="返回" @click-left="onClickLeft"  fixed placeholder>
      <template #right>
        <span @click="onClickLeft"
          >历史健康档案</span
        >
      </template>
    </van-nav-bar>
    <div class="header">
      <van-row type="flex" align="center">
        <van-col span="3" class="avatar">
          <img
            :src="
              hzinfo.img ? hzinfo.img : require('@/assets/images/avatar.png')
            "
            alt=""
          />
        </van-col>
        <van-col span="21" :offset="1">
          <div class="gr">
            <span class="name">{{ hzinfo.name }}</span>
            <van-tag plain type="primary" v-if="hzinfo.jibing">{{
              hzinfo.jibing
            }}</van-tag>
            <van-tag plain type="warning" v-if="hzinfo.gwname">{{
              hzinfo.gwname
            }}</van-tag>
          </div>
          <div>健康档案次数：{{ blnums }}次</div>
        </van-col>
      </van-row>
    </div>
    <div class="nav">
      <div class="bt">
        <h1>健康档案标题</h1>
      </div>
      <van-divider
        :style="{ borderColor: 'rgba(225,225,225,.6)', padding: '0 20px' }"
      >
      </van-divider>
      <van-field
        v-model="form.title"
        label="标题"
        placeholder="例如：首次检查健康档案"
        readonly
      />
    </div>
    <div class="main">
      <div class="information">
        <h1>基本信息</h1>
        <van-divider :style="{ borderColor: 'rgba(225,225,225,.6)' }">
        </van-divider>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.tizhong"
              label="当前体重"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="5" class="company">kg</van-col>
        </van-row>
        <van-row type="flex" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.tizhong2"
              label="未生病前体重"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="5" class="company">kg</van-col>
        </van-row>
        <van-row type="flex" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.tizhong3"
              label="一个月前体重"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="5" class="company">kg</van-col>
        </van-row>
        <van-row type="flex" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.tizhong4"
              label="三个月前体重"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="5" class="company">kg</van-col>
        </van-row>
        <van-row type="flex" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.shengao"
              label="身高"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="5" class="company">cm</van-col>
        </van-row>
        <van-row type="flex" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.bmi"
              label="BMI"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="6" class="company">%</van-col>
        </van-row>
        <van-row type="flex" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.gugeji"
              label="骨骼肌"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="5" class="company">kg</van-col>
        </van-row>
      </div>
      <div class="indicator">
        <h1>营养指标</h1>
        <van-divider :style="{ borderColor: 'rgba(225,225,225,.6)' }">
        </van-divider>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_na"
              label="钠"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="5" :offset="8" class="company">mmol/L</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_gai"
              label="钙"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="5" :offset="8" class="company">mmol/L</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_jia"
              label="钾"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="5" :offset="8" class="company">mmol/L</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_lin"
              label="磷"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="5" :offset="8" class="company">mmol/L</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_crp"
              label="CRP"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="5" :offset="10" class="company">mg/dL</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_tbil"
              label="TBIL"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="5" :offset="10" class="company">umd/L</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_alb"
              label="ALB"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="1" class="company">g/L</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_alt"
              label="ALT"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="2" :offset="1" class="company">u/L</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="21"
            ><van-field
              v-model="form.yy_cr"
              label="Cr"
              placeholder="暂无数据"
              type="number"
              readonly
          /></van-col>
          <van-col span="5" :offset="10" class="company">umd/L</van-col>
        </van-row>
      </div>
      <div class="disease">
        <h1>疾病信息</h1>
        <van-cell 
          class="fontColor">
          <span class="fontLeft">基础疾病</span>
          <span class="fontRight">{{form.jb_jclist == "请选择" ? '暂无信息' : form.jb_jclist }}</span>
        </van-cell>
        <van-cell 
          class="fontColor">
          <span class="fontLeft">疾病部位</span>
          <span class="fontRight">{{form.jb_bwlist == "请选择" ? '暂无信息' : form.jb_bwlist}}</span>
        </van-cell>
      </div>
      <div class="complication">
        <h1>并发症</h1>
        <van-divider :style="{ borderColor: 'rgba(225,225,225,.6)' }">
        </van-divider>
        <van-field name="radio" label="胸水" input-align="right">
          <template #input>
            <van-radio-group v-model="form.bfz_xiongshui" direction="horizontal">
              <van-radio disabled :name="1">有</van-radio>
              <van-radio disabled :name="0">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="腹水" input-align="right">
          <template #input>
              <van-radio-group  v-model="form.bfz_fushui" direction="horizontal">
                 <van-radio disabled :name="1">有</van-radio>
                 <van-radio disabled :name="0">无</van-radio>
              </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="心包积液" input-align="right">
          <template #input>
              <van-radio-group v-model="form.bfz_xbjy" direction="horizontal">
                <van-radio disabled :name="1">有</van-radio>
                <van-radio disabled :name="0">无</van-radio>
              </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="肺部感染" input-align="right">
          <template #input>
            <van-radio-group v-model="form.bfz_fbgr" direction="horizontal">
               <van-radio disabled :name="1">有</van-radio>
               <van-radio disabled :name="0">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="肠梗阻" input-align="right">
          <template #input>
            <van-radio-group v-model="form.bfz_cgz" direction="horizontal">
               <van-radio disabled :name="1">有</van-radio>
               <van-radio disabled :name="0">无</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="other">其他</div>
        <van-field
          v-model="form.bfz_else"
          rows="3"
          autosize
          type="textarea"
          placeholder="暂无数据"
          class="textarea"
          readonly
        />
      </div>
      <div class="inspectionreport">
        <h1 style="display:block;margin-bottom:15px">检查报告</h1>
        <div class="baogao_box" v-if="form.baogao !== null || form.baogao.lenght !=0">
          <div class="img_baogao" v-for="(item,index) in form.baogao" :key="index" @click="Preview(form.baogao,index)" >
            <van-image class="BloodIndexImg"  fit="cover" v-if ="item !==''" :src="apiConfig.imgUrl + item" />
            <van-empty v-else image="error" description="暂无报告" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apiConfig from "../../../config/api.config";
import { bingliinfo } from "@/apis/record";
import { ImagePreview } from 'vant';
export default {
    components: {
      ImagePreview
    },
  data() {
    return {
      apiConfig,
      id:'',
      detail: {},
      Azlx: [],
      fileList: [],
      showAzlx: false,
      message: "",
      radio: "0",
      radio1: "1",
      show:false,
      blnums:'',
      hzinfo:'',
      form: {}
    };
  },
  methods: {
    csaeDetails(){
      bingliinfo({id:this.id})
      .then((res) => {
        this.form = res.data.list
        this.blnums = res.data.blnums
        this.hzinfo = res.data.hzinfo
        // this.form.baogao = res.data.list.baogao[0].split(',')
        console.log(this.form)
      })
      .catch((err) => {
        if(err.msg){
          this.$toast(err.msg);
        }else{
          this.$toast("网络错误"); 
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    showPopup:function() {
       this.show = true;
    },
    Preview(imgs,index) {
      let arr = [];
      for (let i = 0; i < imgs.length; i++) {
        const element = imgs[i];
        arr.push(apiConfig.imgUrl+element)
      }
      ImagePreview({images:arr,startPosition:index})
    },
  },
  mounted() {
    this.csaeDetails();
  },
  created() {
   this.id = this.$route.params.id;
  }
};
</script>

<style lang="less">
#caseDetails {
  text-align: left;
  color: #404040;
  padding-bottom: 30px;
  .van-nav-bar__left {
    .van-icon,.van-nav-bar__text{
      color: #404040;
    }
  }
  .gr {
    margin-bottom: 10px;
    .name {
      font-size: 15px;
      font-weight: bold;
    }
  }
  h1 {
    font-size: 18px;
    font-weight: bold;
  }
  .company {
    font-size: 15px;
  }
  .van-nav-bar__right {
    color: #3660c8;
    font-size: 14px;
  }
  .header {
    color: #fff;
    padding: 25px 15px;
    background-image: linear-gradient(to right, #4589ed, #569aff);
    .van-tag--plain {
      background-color: transparent;
    }
    .van-tag--primary.van-tag--plain {
      color: #fff;
    }
    .van-tag--warning.van-tag--plain {
      color: #f7d300;
    }
  }
  .nav {
    background-color: #fff;
    padding-top: 30px;
    margin-bottom: 10px;
    h1 {
      font-size: 18px;
      margin-left: 20px;
      font-weight: bold;
    }
    .van-divider {
      margin: 20px 0;
    }
    .van-cell {
      padding: 0px 18px 20px;
      .van-field__label {
        font-size: 15px;
        margin-left: 5px;
        width: 50px;
      }
    }
  }
  .main {
    .information,
    .indicator,
    .disease,
    .complication,
    .inspectionreport {
      margin-bottom: 10px;
      background-color: #fff;
      padding: 30px 20px 0;
    }
    .complication {
      .other {
        margin: 20px 5px 0;
        font-size: 15px;
      }
      .textarea {
        margin-left: 5px;
      }
    }
    .indicator {
      .van-field__label {
        font-size: 15px;
        width: 50px;
        margin-left: 5px;
      }
    }
    .baogao_box{
      display: flex;
      flex-wrap: wrap;
      .img_baogao{
        margin: 5px 8px;
        .van-image{
          width: 80px;
          height: 80px;
        }
      }
    }
    
    .inspectionreport {
      padding-bottom: 20px;
      .van-uploader {
        margin-top: 20px;
        margin-bottom: 27px;
      }
      .van-uploader__preview {
        width: 100%;
        .van-image {
          height: 100%;
          width: 100%;
        }
      }
      .van-uploader__input-wrapper {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .van-button {
        height: 50px;
        font-size: 16px;
      }
    }
    .van-divider {
      margin: 20px 0 0;
    }
    .van-row {
      border-bottom: 1px solid #f5f5f5;
    }
    h1 {
      font-size: 18px;
      font-weight: bold;
    }
    .van-cell {
      padding: 20px 0;
      &::after {
        right: 0;
        left: 0;
      }
      .van-field__label {
        font-size: 15px;
        margin-left: 5px;
      }
    }
  }
  .fontColor{
    .fontLeft{
      font-size: 15px;
      width: 120px;
      margin-left: 5px;
    }
    .fontRight{
      display: inline-block;
      margin-right: 10px;
      width: 220px;
      font-size: 15px;
      color: #999999;
    }
    span{
        -webkit-box-flex: 0;
        -webkit-flex: none;
        flex: none;
        box-sizing: border-box;
        width: 6.2em;
        margin-right: 12px;
        color: #404040;
        text-align: left;
        word-wrap: break-word;
    }
  }
  .van-cell__title {
    color: #404040 !important;
  }
  .checkbox{
    width: 90vw;
    height: 80%;
    margin: 0 auto;
    padding-top: 15%;

  }
}

</style>
